;(function (name) {
    window.components = window.components || {}
    window.components[name] = {
        name,
        props: {},
        inject: ['connection'],
        data() {
            return {
                state: 'WARNING',
                extra: ''
            }
        },
        computed: {
            stateComputed() {
                switch (this.state) {
                    case 'WARNING':
                        return {
                            icon: 'warn',
                            text: '服务器断开连接, 请检查网络。'
                        }
                    case 'LOADING':
                        return {
                            icon: 'loading',
                            text: '正在连接服务器, 请稍等片刻...'
                        }
                    case 'FAILURE':
                        return {
                            icon: 'error',
                            text: '连接服务器失败, 请检查网络。'
                        }
                }
            }
        },
        methods: {
            async reconnect() {
                try {
                    this.extra = ''
                    this.state = 'LOADING'
                    await this.onFn('reconnect', this.connection.host)
                    this.state = 'WARNING'
                } catch (error) {
                    this.state = 'FAILURE'
                    this.extra = error.message || '未知异常'
                }
            },
            disconnect() {
                this.onFn('disconnect', this.connection.host)
            }
        },
        template: `
<div class="reconnect" v-if="!connection.isConnected">
    <div class="reconnect-wapper">
        <div class="reconnect-state">
            <svg v-if="stateComputed.icon=='loading'" viewBox="0 0 1024 1024" width="48" height="48">
                <path
                    d="M465.4592 46.5408v186.1888a46.5408 46.5408 0 1 0 93.0816 0V46.5408a46.5408 46.5408 0 1 0-93.0816 0z m0 744.7296v186.1888a46.5408 46.5408 0 0 0 93.0816 0V791.2704a46.5408 46.5408 0 1 0-93.0816 0zM150.016 215.8336l131.712 131.7248a46.5408 46.5408 0 0 0 65.8304-65.8176L215.8464 150.016a46.5408 46.5408 0 0 0-65.8304 65.8176zM676.4416 742.272l131.712 131.7248a46.5408 46.5408 0 0 0 65.8304-65.8176L742.272 676.4416a46.5408 46.5408 0 0 0-65.8304 65.8176zM46.5536 558.5408h186.176a46.5408 46.5408 0 1 0 0-93.0816H46.5408a46.5408 46.5408 0 1 0 0 93.0816z m744.7168 0h186.1888a46.5408 46.5408 0 0 0 0-93.0816H791.2704a46.5408 46.5408 0 1 0 0 93.0816zM215.8336 873.984l131.7248-131.712a46.5408 46.5408 0 0 0-65.8176-65.8304L150.016 808.1536a46.5408 46.5408 0 0 0 65.8176 65.8304zM742.272 347.5584l131.7248-131.712a46.5408 46.5408 0 0 0-65.8176-65.8304L676.4416 281.728a46.5408 46.5408 0 0 0 65.8176 65.8304z"
                    fill="#1196db" p-id="6317">
                    <animateTransform attributeName="transform" attributeType="XML" type="rotate"
                        from="0 512 512" to="-360 512 512" dur="2s" repeatCount="indefinite" />
                </path>
            </svg>
            <svg v-else-if="stateComputed.icon=='error'" viewBox="0 0 1024 1024" width="48" height="48">
                <path
                    d="M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m0 796.458667A56.917333 56.917333 0 1 1 511.957333 682.666667 56.917333 56.917333 0 0 1 512 796.458667z m54.186667-227.797334h0.128a60.501333 60.501333 0 0 1-53.802667 55.893334c2.048 0.256 3.882667 1.152 5.973333 1.152h-11.818666c2.048 0 3.84-0.981333 5.845333-1.109334a59.093333 59.093333 0 0 1-53.162667-55.893333l-13.056-284.16a54.314667 54.314667 0 0 1 54.613334-57.045333h26.282666a52.992 52.992 0 0 1 54.186667 57.002666l-15.146667 284.16z"
                    fill="#B94343" p-id="9353"></path>
            </svg>
            <svg v-else-if="stateComputed.icon=='warn'" viewBox="0 0 1024 1024" width="48" height="48">
                <path
                    d="M1019.20384 901.632L546.62784 82.944c-15.36-26.112-52.736-26.112-68.096 0L5.44384 901.632c-15.36 26.112 3.584 58.88 34.304 58.88h945.152c30.208 0 49.152-32.768 34.304-58.88z"
                    fill="#E9994B" p-id="10404"></path>
                <path
                    d="M462.14784 353.792h0.512c0-26.112 20.992-47.104 47.104-47.104h5.632c26.112 0 47.104 20.992 47.104 47.104v254.464c0 26.112-21.504 47.616-48.128 47.104h-4.608c-26.112 0-47.616-20.992-47.616-47.104V353.792zM569.66784 775.68c-5.12 26.112-20.48 41.984-46.592 47.616-6.144 1.536-12.288 1.536-18.432 0-27.136-5.632-43.52-20.992-49.152-46.592-1.536-6.656-1.536-13.312 0-19.456 5.632-25.6 22.016-40.96 49.152-46.08 6.144-1.024 12.288-1.024 18.432 0 26.112 5.632 41.472 20.992 46.592 47.104 1.024 5.632 1.024 11.776 0 17.408z"
                    fill="#FFFFFF" p-id="10405"></path>
            </svg>
            <div class="reconnect-text">{{stateComputed.text}}</div>
            <div class="reconnect-text-extra" v-if="extra">{{extra}}</div>
        </div>
        <div class="reconnect-actions">
            <button class="reconnect-btn-connect" @click="reconnect">连接</button>
            <button class="reconnect-btn-close" @click="disconnect">关闭</button>
        </div>
    </div>
</div>
`
    }
})('Reconnect')
